import React from 'react';
import style from './style.module.scss';
import message_black_n from '../../assets/images/icon/common resource/hdpi/common_nav_message_black_n.png'
import message_black_s from '../../assets/images/icon/common resource/hdpi/common_nav_message_black_s.png'
import message_white_n from '../../assets/images/icon/common resource/hdpi/common_nav_message_white_n.png'
import message_white_s from '../../assets/images/icon/common resource/hdpi/common_nav_message_white_s.png'
import common_icon_search_n from '../../assets/images/icon/common resource/hdpi/common_icon_search_n.png'
import userUrl from '../../assets/images/custom-user (1).png'
import { useAppSelector } from '../../app/hooks';
import { useNavigate } from 'react-router-dom';
type PropsType = {
  title?: string
  showSearch?: boolean,
  mode: 'white' | 'black'
}

const Search: React.FC = () => {
  const navigate = useNavigate()
  return (
    <div className={style.search} onClick={() => navigate('/home/search')}>
      <img src={common_icon_search_n} alt="" width={20} height={20} />
      <span>请输入病症/疾病</span>
    </div>
  )
}

export const WdHeader: React.FC<PropsType> = ({ title, showSearch, mode }) => {
  const navigate = useNavigate()
  // 右侧图片
  const messageUrl = mode === 'white'
    ? message_white_n
    : message_black_n

  // 左侧图片
  const userInfo = useAppSelector(state => state.user.userInfo)
  const isLogin = useAppSelector(state => state.user.isLogin)
  const userByUrl = isLogin ? userInfo.headPic : userUrl

  // 用户头像点击
  const handleClickUser = () => {
    navigate(isLogin ? '/my' : '/login')
  }
  return (
    <div className={style.header}>
      <div className={style.left}>
        <img src={userByUrl} alt="" width={30} height={30} onClick={() => handleClickUser()}/>
      </div>
      <div className={style.middle}>
        {
          showSearch ? <Search></Search> : <span>{title}</span>
        }
      </div>
      <div className={style.right}>
        <img src={messageUrl} alt="" width={30} height={30} />
      </div>
    </div>
  )
}
